<template>
	<div id="message_center" class="container">
		<div class="left_side">
			<div class="content">
				<div class="title">
					<span style="cursor: pointer;" @click="openWorkPlatform()">工作台</span> > {{title}}
				</div>
				<div class="panel">
					<div class="condition">
						<div class="row_one">
							<el-input style="width: 3.5rem;" placeholder="搜索 消息标题" clearable
				   				 		  v-model="param.keyword" class="input_search" maxlength="100">
				  			</el-input>
				  			&nbsp;
				  			<div class="search_btn" @click="search()">搜索</div>
						</div>
					</div>
					
					<div>
						<table class="table" cellspacing="0">
							<thead class="thead">
								<tr>
									<td style="width: 4rem;">消息标题</td>
									<td style="width: 5rem;">消息内容</td>
									<td style="width: 2rem;">消息类型</td>
									<td style="width: 2.5rem;">接收时间</td>
									<td style="width: 1.5rem;">发送人</td>
									<td style="width: 1.5rem;">状态</td>
								</tr>
							</thead>
							<tbody class="tbody">
								<tr v-for="item,index in messageList" style="cursor: pointer;" @click="openDetail(item)">
									<td style="">
										<span class="message_title">
											<span class="newFlag" :class="item.isNew=='0'?'hidden':''">新</span>
											{{item.title}}
										</span>
									</td>
									<td>
										<div class="omit">{{item.content}}</div>
									</td>
									<td>{{item.typeName}}</td>
									<td>{{item.publishTime}}</td>
									<td>{{ item.sendName}}</td>
									<td>
										<span :style="{color : statusColor[item.status]}">
											{{item.status==1? '已读':'未读'}}
										</span>
									</td>
								</tr> 
							</tbody>
						</table>
					</div>
					<el-pagination
				      layout="total, sizes, prev, pager, next, jumper"
				      :current-page="param.currPage"
				      @size-change="pageSizeChange"
			      	  @current-change="pageIndexChange"
				      :total="count">
				    </el-pagination>
				</div>
			</div>
		</div>
		<div class="right_side">
			<div class="qrcode_div">
				<div class="qrcode_1">下载威校APP</div>
				<div class="qrcode_2">接收消息更及时</div>
				<div class="ios_qrcode"></div>
				<div class="qrcode_3">苹果用户扫我</div>
				<div class="android_qrcode"></div>
				<div class="qrcode_3">安卓用户扫我</div>
			</div>
			
		</div>
		
		<el-dialog title="消息详情" :visible.sync="detailVisible" width="8rem"
			:close-on-click-modal="false" append-to-body>
			<messageDetail ref="messageDetail" @read="search()" @cancel="detailVisible=false"></messageDetail>
		</el-dialog>
	</div>
</template>

<script>
	
import messageDetail from './common/message_detail'
	
var vm,dict;
export default {
	components : {
		messageDetail
	},
	data : function() {
		return {
			title : this.$route.name,
			param : {
				campusId : this.$store.state.campusId,
				keyword : "",
				startTime : "",
				currPage : 1,
				pageSize : 10
			},
			count : null,
	        messageList : [],
	        newIdList: [], //记录新消息id列表
	        statusColor : {
	        	"0" : "#ff5252", //红色
	        	"1" : "#19b10d", //绿色
	        },
	        detailVisible: false,
		}
	},
	methods : {
		search : function(currPage) {
			vm.param.currPage = currPage || 1;
			vm.param.startTime = vm.getStartTime();
			//请求列表
			api.messageReceiveList(vm.param).then(function(data) {
				let newIdList = [];
				//遍历列表
				data.list.forEach(function(item) {
					//判断是系统消息还是通知消息
					if(item.type == 1) {
						item.typeName = "通知消息";
						item.sendName = item.sendUserName;
					} else {
						item.typeName = "系统消息";
						item.sendName = "系统管理员";
					}
					//判断是否新消息
					if(item.isNew == 1) {
						newIdList.push(item.logId);
					}
				});
				vm.messageList = data.list;
				vm.count = data.totalCount;
				
				return api.messagePreview(newIdList);
			})
		},
		getStartTime : function(val) {
			let time = new Date();
			time.setMonth(time.getMonth()-3);
			return tool.DateToString(time, "yyyy-MM-dd");
		},
		campusChange : function(campusId) {
			vm.param.campusId = campusId;
			vm.search();
		},
		pageSizeChange : function(val) { //页条数发生改变
	  		vm.param.pageSize = val;
	    	vm.search();
	  	},
	  	pageIndexChange : function(val) { //页码发生改变
	    	vm.param.currPage = val;
	    	vm.search(val);
	  	},
		openDetail : function(message) {
			vm.detailVisible = true;
			vm.$nextTick(function() {
				vm.$refs.messageDetail.init(message);
			})
		},
		openWorkPlatform : function() {
			var obj = vm.$store.state.permit["16"];
    		if(!obj) {
				tool.message({ showClose: true, message: "当前用户缺少权限", type: 'warning' });
				return;
			}
			//传递参数    
			this.$router.push({path: obj.path});
		}
	},
	mounted : function() {
		
	},
	created : function() {
		vm = this;
		//请求列表数据
		vm.search();
		
		//获取数据字典对象
		dict = tool.getItem(lsKey.dict,true);
	},
}

</script>

<style lang="scss">
	#message_center {
		.el-input__inner {
			border-radius: 0.08rem;
			font-size: 0.16rem;
			color: #666666;
			height: 0.36rem;
			line-height: 0.36rem;
		}
		.el-input__icon {
			line-height: 0.36rem;
		}
		
		.input_search {
			.el-input__inner {
				background-color: rgb(247,248,250);
			}
		}
	}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped lang="scss" src="@/style/work_platform/message_center.css"></style>
